<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
export default {
    mixins: [Vue.prototype.$vFN.Mixins.Base],

    computed: {},
    data() {
        return {
            // 外部传入
            appWindow: null,
            // 外部传入
            apiConfig: null,
            searchValue: "",
            loadBox: true,
            loadOption: false,
            marker: null,
            addressInfo: {
                lat: "39.908824",
                lng: "116.397350",
                // 详细地址
                detailAddress: "北京市东城区西长安街1号",
                // 省
                province: "北京",
                provinceCode: "110000",

                // 市
                city: "北京市",
                cityCode: "110100",

                // 区
                region: "东城区",
                regionCode: "110101",
            },

            // 附近
            poisList: [],
            boxVisible: false,
        };
    },
    methods: {
        async init() {
            this.boxVisible = true;
            this.loadScript();
        },
        initMap() {
            this.loadBox = true;
            //定义地图中心点坐标
            var center = new TMap.LatLng(
                this.addressInfo.lat,
                this.addressInfo.lng
            );
            // //定义map变量，调用 TMap.Map() 构造函数创建地图
            let map = new TMap.Map(
                document.getElementById("SelectAddressMapContainer"),
                {
                    center: center, //设置地图中心点坐标
                    zoom: 11, //设置地图缩放级别
                    // pitch: 43.5, //设置俯仰角
                    // rotation: 45, //设置地图旋转角度
                }
            );
            this.map = map;
            //初始化marker图层
            let marker = new TMap.MultiMarker({
                id: "markerLayer",
                map: map,
            });
            this.marker = marker;
            // 初始化回显坐标点

            this.setMapPosition({
                lat: this.addressInfo.lat,
                lng: this.addressInfo.lng,
            });
            map.on("click", async (evt) => {
                this.setMapPosition(evt.latLng);
                this.getAddress(evt.latLng);
            });
            this.loadBox = false;
        },
        async search() {
            if (this.searchValue) {
                this.loadBox = true;
                let _data = await this.$vFN.Http.post(
                    {
                        url: this.apiConfig.addressInfo.url,
                        domain: this.apiConfig.addressInfo.domain,
                        data: {
                            address: this.searchValue,
                        },
                    },
                    window
                );
                if (_data._ok) {
                    let res = JSON.parse(_data.data);
                    if (res.status == 0) {
                        let _position = new TMap.LatLng(
                            res.result.location.lat,
                            res.result.location.lng
                        );
                        this.map.setCenter(_position);
                    } else {
                        this.$vFN.Tools.messageError(res.message);
                    }
                }
                this.loadBox = false;
            }
        },
        // 根据经纬度设置地图坐标点
        setMapPosition(latLng) {
            if (this.marker.geometries.length > 0) {
                this.marker.remove(this.marker.geometries[0].id);
            }
            this.marker.add({
                position: {
                    lat: latLng.lat,
                    lng: latLng.lng,
                    height: latLng.height ? latLng.height : 0,
                },
            });
        },
        // 根据经纬度获取地址信息
        async getAddress(latLng) {
            this.loadOption = true;
            let _data = await this.$vFN.Http.post(
                {
                    url: this.apiConfig.location.url,
                    domain: this.apiConfig.location.domain,
                    data: {
                        lat: latLng.lat,
                        lng: latLng.lng,
                    },
                },
                window
            );
            if (_data._ok) {
                let res = JSON.parse(_data.data).result;

                console.error("res", res);
                let _toAddressCode = this.toAddressCode(res.ad_info);
                console.error(_toAddressCode);
                this.setAddressInfo({
                    ...{
                        detailAddress: res.address,
                    },
                    ..._toAddressCode,
                });
                this.poisList = res.pois;
            }
            this.loadOption = false;
        },

        setAddressInfo(data_) {
            // 省
            this.addressInfo.province = data_.province;
            this.addressInfo.provinceCode = data_.provinceCode;
            // 市
            this.addressInfo.city = data_.city;
            this.addressInfo.cityCode = data_.cityCode;
            // 区
            this.addressInfo.region = data_.region;
            this.addressInfo.regionCode = data_.regionCode;
            // 详细地址
            this.addressInfo.detailAddress = data_.detailAddress;
            // 纬度
            this.addressInfo.lat = data_.lat.toFixed(6);
            // 精度
            this.addressInfo.lng = data_.lng.toFixed(6);
        },
        getPoisItem(item) {
            return this.toAddressCode({
                ...item.ad_info,
                ...{
                    location: item.location,
                },
            });
        },

        // 区号转 省市区号
        toAddressCode(info_) {
            return {
                // 省
                province: info_.province,
                provinceCode: info_.adcode.substring(0, 2) + "0000",
                // 市
                city: info_.city,
                cityCode: info_.adcode.substring(0, 4) + "00",
                // 区
                region: info_.district,
                regionCode: info_.adcode,
                lat: info_.location.lat,
                lng: info_.location.lng,
            };
        },
        // 选择附近
        selectPoisItem(item) {
            let _d = this.getPoisItem(item);
            console.error(_d);
            this.setAddressInfo({
                ...{
                    detailAddress: item.address,
                },
                ..._d,
            });
            this.setMapPosition({
                lat: _d.lat,
                lng: _d.lng,
            });
        },
        loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src =
                "https://map.qq.com/api/gljs?v=1.exp&key=CFZBZ-YSM6U-ZKPVT-44XKE-546YF-ROBPO&callback=init";
            script.onload = script.onreadystatechange = () => {
                this.initMap();
                script.onload = script.onreadystatechange = null;
            };
            document.body.appendChild(script);
        },
        submit() {
            this.onSuccess({
                data: { ...this.addressInfo },
            });
            this.editBoxCancel();
        },
        // 成功回调
        onSuccess() {},
        // 取消回调
        onCancel() {},
        // 失败回调
        onError() {},
        // 关闭窗口
        editBoxClose() {
            this.boxVisible = false;
        },
        // 取消
        editBoxCancel() {
            this.editBoxClose();
        },
    },
    watch: {
        // selected: {
        //     handler(newVal, oldVal) {
        //         console.error("selected", newVal);
        //     },
        //     immediate: true,
        //     deep: true,
        // },
    },
    mounted() {
        this.init();
    },
    beforeCreate() {},
};
</script>